<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>苏宁易购(Suning.com)-送货更准时、价格更超值、上新货更快</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
</head>

<body>
    <!-- 顶部banner -->
    <div class="top-banner">
        <a href="#">
            <img src="images/top-banner.jpg" alt="">
        </a>
        <a href="#" class="close"></a>
    </div>
    <!-- 顶部banner结束 -->
    <!-- 头部区域 -->
    <header>
        <div class="banner">
            <a href="#">
                <img src="images/classify.png" alt="">
            </a>
            <a href="#">
                <img src="images/ad.gif" alt="">
            </a>
            <a href="#">
                <img src="images/login.png" alt="">
            </a>
        </div>
        <div class="search-bar">
            <a class="search"></a>
            <i class="search-icon"></i>
            <form>
                <input type="text" placeholder="双11预售 定金10倍翻">
            </form>
        </div>
    </header>
    <!-- 头部区域结束 -->
    <!-- wrap区域 -->
    <div class="index-wrap">
        <!-- 轮播区域 -->
        <div class="wrapTop">
            <div class="swiperWrap">
                <ul class=swiperList>
                    <li class='current'>
                        <a href="#">
                            <img src="images/banner01.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/banner02.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/banner03.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/banner04.png" alt="">
                        </a>
                    </li>
                </ul>
                <ol class="circle">
                    <li></li>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>
        <!-- 预售区域 -->
        <div class="wrapMiddle">
            <a href="#"><img src="images/countDown.gif" alt=""></a>
        </div>
        <!-- 特惠区域 -->
        <div class="wrapButton">
            <a href="#"><img class="current" src="images/opa01.gif" alt=""></a>
            <a href="#"><img src="images/opa02.gif" alt=""></a>
            <a href="#"><img src="images/opa03.gif" alt=""></a>
        </div>
    </div>
    <!-- wrap区域结束 -->
    <!-- nav区域 -->
    <nav>
        <ul class="navList">
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_01.png" alt="">
                    <p>苏宁秒杀</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_02.png" alt="">
                    <p>苏宁超市</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_03.png" alt="">
                    <p>苏宁拼购</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_04.png" alt="">
                    <p>手机数码</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_05.png" alt="">
                    <p>苏宁家电</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_06.png" alt="">
                    <p>免费水果</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_07.png" alt="">
                    <p>赚钱消消乐</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_08.png" alt="">
                    <p>签到有礼</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_09.png" alt="">
                    <p>领券中心</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img class="navIcon" src="images/nav_10.png" alt="">
                    <p>更多频道</p>
                </a>
            </li>

        </ul>
    </nav>
    <!-- nav区域结束 -->
    <!-- 红包区域 -->
    <div class="redPacket">
        <a href="#" class="first">
            <img src="images/preference01.png" alt="">
        </a>
        <a href="#">
            <img src="images/preference02.gif" alt="">
        </a>
        <a href="#">
            <img src="images/preference03.gif" alt="">
        </a>
    </div>
    <!-- 红包区域结束 -->
    <!-- main主体部分 -->
    <main>
        <!-- 特价区域 -->
        <div class="specialPrice">
            <div class="specialbox">
                <div class="title-wrapper">
                    <div class="title">天天特价</div>
                    <div class="count">
                        <span>04 </span><i>:</i>
                        <span>32 </span><i>:</i>
                        <span>26 </span>
                    </div>
                </div>
                <p class="des">人气好货限时抢</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/product6-01.jpg" alt="">
                            <p class="price">¥1.1</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/product6-02.jpg" alt="">
                            <p class="price">¥1.9</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="specialbox">
                <div class="title-wrapper">
                    <div class="title">苏宁秒杀</div>
                </div>
                <p class="des">品质好货天天秒</p>
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/product6-03.webp" alt="">
                            <p class="arr">农夫山泉</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/product6-04.webp" alt="">
                            <p class="arr">亚太森博</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 为您推荐 -->
        <div class="recommend">
            <div class="recommend-l">
                <p>为您推荐</p>
                <p>精选频道</p>
            </div>
            <ul class="recommend-r">
                <li>
                    <a href="#">
                        <img src="images/product5-01.webp" alt="">
                        <p>苏宁国际</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product5-02.webp" alt="">
                        <p>苏宁国际</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product5-03.png" alt="">
                        <p>苏宁国际</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/product5-04.webp" alt="">
                        <p>苏宁国际</p>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 优惠券 -->
        <div class="discount">
            <a href="#">
                <img src="images/product7-01.webp" alt="">
                <p class="title">冰箱洗衣机</p>
                <p class="desc">抽111券</p>
            </a>
            <a href="#">
                <img src="images/product7-02.webp" alt="">
                <p class="title">电视家影</p>
                <p class="desc" style="color:#A42AE0;">至高敌1000</p>
            </a>
            <a href="#">
                <img src="images/product7-03.webp" alt="">
                <p class="title">手机通讯</p>
                <p class="desc" style="color:#fba600;">抢30元券</p>
            </a>
            <a href="#">
                <img src="images/product7-04.webp" alt="">
                <p class="title">优秀书籍</p>
                <p class="desc" style="color:#4BA093;">满200减20</p>
            </a>
        </div>
        <!-- 推荐榜单 -->
        <div class="recommendations">
            <a class="title" href="#">
                <img src="images/recommendations.png" alt="">
            </a>
            <div class="recommendationsList">
                <a href="#" class="recommendationsItem">
                    <div class="top">
                        <img src="images/product75-01.webp" alt="">
                    </div>
                    <div class="bottom">
                        <p class="peopleList">人气榜</p>
                        <p class="productList">甄选营养纯牛奶榜</p>
                        <p class="productNum">卖爆47.5万件</p>
                    </div>
                </a>
                <a href="#" class="recommendationsItem">
                    <div class="top">
                        <img src="images/product75-02.webp" alt="">
                    </div>
                    <div class="bottom diff">
                        <p class="peopleList">人气榜</p>
                        <p class="productList">静音时尚挂钟榜</p>
                        <p class="productNum">卖爆1582件</p>
                    </div>
                </a>
                <a href="#" class="recommendationsItem">
                    <div class="top">
                        <img src="images/product75-03.webp" alt="">
                    </div>
                    <div class="bottom">
                        <p class="peopleList">人气榜</p>
                        <p class="productList">健康轻食榜</p>
                        <p class="productNum">卖爆5021万件</p>
                    </div>
                </a>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="like">
            <div class="title"></div>
            <div class="likeList">
                <a class="likeItem">
                    <div class="pic">
                        <img src="images/main-product01.webp" alt="">
                    </div>
                    <div class="des">
                        <p class="desTitle">中粮福临门葵花籽清香食用植物调和油5L/桶含大豆油菜籽油</p>
                        <div class="desBtn">
                            <span class="self">自营</span>
                            <span class="other">百亿补贴</span>
                        </div>
                        <div class="desPrice">
                            <span>¥</span>
                            <span>39</span>
                            <span>.9</span>
                            <span>64万+评价</span>
                        </div>
                    </div>
                </a>
                <a class="likeItem">
                    <div class="pic">
                        <img src="images/main-product02.webp" alt="">
                    </div>
                    <div class="des">
                        <p class="desTitle">舒肤佳沐浴露套装沐浴乳液 纯白720ml+芦荟720ml送青瓜400ml+纯白100ml*2无皂基 王一博同款/桶含大豆油菜籽油</p>
                        <div class="desBtn">
                            <span class="self">自营</span>
                            <span class="other">百亿补贴</span>
                        </div>
                        <div class="desPrice">
                            <span>¥</span>
                            <span>54</span>
                            <span>.9</span>
                            <span>4.7万+评价</span>
                        </div>
                    </div>
                </a>
                <a class="likeItem">
                    <div class="pic">
                        <img src="images/main-product03.webp" alt="">
                    </div>
                    <div class="des">
                        <p class="desTitle">王老吉 凉茶 植物饮料 盒装 250ml*24/箱（新老包装交替发货） 纯白720ml+芦荟720ml送青瓜400ml+纯白100ml*2无皂基 王一博同款/桶含大豆油菜籽油</p>
                        <div class="desBtn">
                            <span class="self">自营</span>
                            <span class="other">秒杀</span>
                            <span class="other">包邮</span>
                        </div>
                        <div class="desPrice">
                            <span>¥</span>
                            <span>52</span>
                            <span>.9</span>
                            <span>13万+评价</span>
                        </div>
                    </div>
                </a>
                <a class="likeItem">
                    <div class="pic">
                        <img src="images/main-product04.webp" alt="">
                    </div>
                    <div class="des">
                        <p class="desTitle">农夫山泉天然饮用水5L*4 整箱装</p>
                        <div class="desBtn">
                            <span class="self">自营</span>
                            <span class="other">秒杀</span>
                            <span class="other">包邮</span>
                        </div>
                        <div class="desPrice">
                            <span>¥</span>
                            <span>32</span>
                            <span>.9</span>
                            <span>76万+评价</span>
                        </div>
                    </div>
                </a>
                <a class="likeItem">
                    <div class="pic">
                        <img src="images/main-product05.webp" alt="">
                    </div>
                    <div class="des">
                        <p class="desTitle">满300减200【三只松鼠 甘栗仁100g】休闲零食坚果特产板栗仁栗子仁</p>
                        <div class="desBtn">
                            <span class="self">包邮</span>
                            <span class="other">领券139-30</span>
                        </div>
                        <div class="desPrice">
                            <span>¥</span>
                            <span>28</span>
                            <span>.5</span>
                            <span>32万+评价</span>
                        </div>
                    </div>
                </a>
                <a class="likeItem">
                    <div class="pic">
                        <img src="images/main-product06.webp" alt="">
                    </div>
                    <div class="des">
                        <p class="desTitle">兰雀唯鲜全脂高钙纯牛奶200ml*24盒 奥地利原装进口牛奶 营养早餐奶</p>
                        <div class="desBtn">
                            <span class="self">自营</span>
                            <span class="other">满两件打八折</span>
                        </div>
                        <div class="desPrice">
                            <span>¥</span>
                            <span>59</span>
                            <span>.9</span>
                            <span>1.5万+评价</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </main>
    <!-- main主体部分结束 -->
    <!-- footer部分 -->
    <footer>
        <a href="#">
            <img src="images/footer-home.png" alt="">
            <p>首页</p>
        </a>
        <a href="#">
            <img src="images/footer-search.png" alt="">
            <p>分类</p>
        </a>
        <a href="#">
            <img src="images/footer-ph.png" alt="">
            <p>排行</p>
        </a>
        <a href="#">
            <img src="images/footer-car.png" alt="">
            <p>购物车</p>
        </a>
        <a href="#">
            <img src="images/footer-mine.png" alt="">
            <p>我的易购</p>
        </a>
    </footer>
    <!-- footer部分结束 -->

</body>

</html>